
<p>
  <a
    class="soc-facebook dhe_fb_share"
    href="#"
    data-href="http://www.dakehe.info/blog/post/facebook-share-button"
    data-caption="An example caption"
    data-picture="http://g-ecx.images-amazon.com/images/G/01/img16/events/valentine/31780_events_vday2016_gw-double-promo_440x200._CB300695157_.jpg"
    data-description="description"
    data-name="name"
    data-redirect_uri="http://www.dakehe.info"
    >Share Example 1</a
  >
  <a class="soc-facebook dhe_fb_share" href="#">Share Example 2</a>
</p>
<p>
  Nowaday, lots of website are using facebook share module, this blog will show
  few ways of how to implement facebook share, they can use by different scenrio
  and level of web skill.
</p>
<h2>1. Use Default Facebook Share button</h2>
<p>
  Following is few things you need to do for use the default facebook share
  button.
</p>
<p>
  Go to&nbsp;<a
    href="https://developers.facebook.com/docs/plugins/share-button"
    target="_blank"
    >Facebook Share Developer Page</a
  >, check the code, but following is the example how I'm doing it.
</p>
<h3>Facebook SDK + custom Js module for facebook share</h3>
<p>
  You need Facebook SDK for facebook share, without this the share won't work,
  you cn get this javascript from facebook developer page.
</p>
<p>
  The second thing i'm doing here, depend on my page add current page's url to
  the html, so when share the page, facebook share would know you shared which
  page.
</p>
<pre><code class="language-javascript">
/*
 * Javascript SDK from Facebook.
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * facebook shared
 * html
 * 
 */
var dhe = dhe || {};
dhe.fb_share = (function () {
    var fbData = document.querySelector('.fb-share-button');
    fbData.dataset.href = window.location.pathname;
    return {};
})();
</code></pre>
<h3>The Html</h3>
<pre><code class="language-html">
&lt;a class="fb-share-button" data-href='' data-layout='button_count'&gt;&lt;/a&gt;
</code></pre>
<h3>Buttons looks like following</h3>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/vmqjxbe03pi82cjlu1qg.png"
    alt=""
  />
</p>
<h3>Meta Tag</h3>
<p>
  This meta tag is also important, because when you use default facebook share,
  the share window will use following information to display, such as image,
  description, title.
</p>
<pre><code class="language-html">
    &lt;meta property="og:url" content="/blog/post/javascript-ecmascript-5"&gt;
    &lt;meta property="og:type" content="Hack The Web"&gt;
    &lt;meta property="og:description" content="Hack The Web - Javascript (ECMAScript) 5"&gt;
    &lt;meta property="og:image" content="https://d1p0mp3f1fx0hz.cloudfront.net/_3reqj4osr.png"&gt;
    &lt;meta property="og:image:type" content="image/png"&gt;
    &lt;meta property="og:image:width" content="256"&gt;
    &lt;meta property="og:image:height" content="256"&gt;
    &lt;meta property="og:title" content="Javascript (ECMAScript) 5"&gt;
</code></pre>
<h3>Conclusions</h3>
<p>
  I think this default facebook share is good for starter, easy to implement the
  share feature. However it is less flexbility. If you have multi share at the
  same page, they all going to use same picture, title. Also, it is hard to
  change the style.
</p>
<h2>2. Facebook share - Control the UI</h2>
<p>
  The following solution is more flexible, because you have totally control the
  UI looks, also you can get how many total shared from the specific page, use
  the total shared to control the UI as well. Now, following are steps how you
  do it.
</p>
<p>
  First, Let me show how's the result looks first, follwing is using the
  FontAwesome icon.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_3reqj4osr.png"
    alt=""
  />
</p>
<p>
  Sounds like you have full control of the facebook share, however you're depend
  on following two api. First one, graph.facebook, you can get the total share
  and comments from the api by passing your page. Second url provide facebook
  share feature by passing defined parameter, such as
  <strong
    >u<strong>
      is the actual url of your page. Also, it'll depend on your Metatag. You
      still depend on these two url, and it's hard to find how many parameter
      they support, because document is poor.</strong
    ></strong
  >
</p>
<pre><code>
http://graph.facebook.com/
https://www.facebook.com/sharer/sharer.php?u={encoded url}&amp;t={title, seperate by + }
</code></pre>
<p>Following are the code i did at javascript.</p>
<p>
  Following facebook share could do the same facebook share feature, also you
  could get the count of the share for the page.
</p>
<pre><code class="language-javascript">/*
 * Javascript SDK from Facebook.
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5&amp;title=test";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * My own customized js code
 */
var dhe = dhe || {};
dhe.fb_share = (function () {
    function openPopup(url) {
        window.open(url, "myWindow", "status = 1, height = 500, width = 500, resizable = 0")
    }
    
    function loadFBCount(url) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                //{
                //    "id": "http://news.ycombinator.com",
                //    "shares": 8868,
                //    "comments": 3
                //}
                return JSON.parse(xhttp.responseText);
            }
        };
        xhttp.open("GET", "http://graph.facebook.com/" + url, true);
        xhttp.send();
    }
    
    function init(){
        updateShare();
        var fbCount = loadFBCount(window.location.href);
        // update fb count to UI;
    }
    
    function updateShare(){
        var fbData = document.querySelector('.fb_share');
        var url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href);
        fbData.href = "javascript:dhe.fb_share.openPopup('" + url + "')";
    }
    
    init();

    return {
        openPopup : openPopup
    };
})();
</code></pre>
<p>
  Html is as following, instead of font-awesome's icon, you could change to
  image or other resource.
</p>
<pre><code class="language-html">&lt;a href="" target="_blank" class="fb_share"&gt;&lt;i class="fa fa-facebook-official"&gt; &lt;/i&gt;&lt;/a&gt;
</code></pre>
<h3>Conclusions</h3>
<p>
  Doing this way, you have full control of UI which how facebook should looks
  like, and able to get the total share. However it is still hard to control the
  shared window's content. Good things is, you don't need Facebook development
  account, for both above solution you can just copy javascript, copy html and
  you're done.
</p>
<h2>2. Facebook Feed Dialog</h2>
<p>
  Facebook feed dialog is more flexiable compare to the first two, first you
  need to go to&nbsp;<a
    href="https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5"
    target="_blank"
    >facebook developer</a
  >&nbsp;to register and get app_id.
</p>
<p>Once you got app_id you can start to use, following is how I'm doing.</p>
<p>&nbsp;</p>
<h3>Following is the result view.</h3>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_35d4uy5dr.png"
    alt=""
  />
</p>
<p>&nbsp;</p>
<h4>Facebook SDK and APP init</h4>
<pre><code class="language-javascript">
/*
 * facebook SDK
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * facebook APP init
 */
window.fbAsyncInit = function () {
    FB.init({
        appId      : 'your facebook app id',
        xfbml      : true,
        version    : 'v2.5'
    });
};
</code></pre>
<h4>
  Following javascript, basically I'm bind the click event, and also provide
  method to get share url's total count.
</h4>
<pre><code class="language-javascript">

/*
 * Use facebook.com/sharer/sharer.php and graph.facebook.com/
 */
var dhe = dhe || {};
dhe.fb_share2 = (function () {
    /*
     * 
     * return following type of json object.
    * {
    *     "id": "http://news.ycombinator.com",
    *     "shares": 8868,
    *     "comments": 3
    * }
     */
    function loadFBCount(url, updateCallBack) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                updateCallBack(JSON.parse(xhttp.responseText));
            }
        };
        xhttp.open("GET", "http://graph.facebook.com/" + url, true);
        xhttp.send();
    }
    
    /*
     * update fb fshare count to UI
     */
    function updateCount(fbCount) {
        var fbShare = document.querySelector(".soc_count.fb");
        if (fbShare) {
            fbShare.innerHTML = fbCount.shares;
        }
    }
    
    /*
     * get current url, remove the hash or querystring
     */
    function GetCurrentUrl(){
        var _location = window.location;
        return _location.origin + _location.pathname;
    }
    
    /*
     * bind click event for facebook share
     * load facebook total count
     */
    function init() {
        var all = document.querySelectorAll(".dhe_fb_share");
        for (var i = 0; i &lt; all.length; i++) {
            all[i].onclick = fbShareEvent;
        };
        
        loadFBCount(encodeURIComponent(GetCurrentUrl()), updateCount);
    }
    
    /*
     * get meta tag
     */
    function getMetaTag(tagName){
        var metas = document.getElementsByTagName('meta');
        for (i = 0; i &lt; metas.length; i++) {
            if (metas[i].getAttribute("property") == tagName) {
                return metas[i].getAttribute("content");
            }
        }
    }
    
    /*
     * facebook share event
     */
    function fbShareEvent(e){
        var _this = this;
        var data = {};
        data["app_id"] = "Your Facebook APPID";

        data["method"] = "feed";
        data["href"] = _this.dataset.href ? encodeURIComponent(_this.dataset.href) : encodeURIComponent(GetCurrentUrl());
        data["caption"] = (_this.dataset.caption) ? _this.dataset.caption : getMetaTag("og:title");
        data["name"] = (_this.dataset.name) ? _this.dataset.name : getMetaTag("og:type");
        data["description"] = (_this.dataset.description) ? _this.dataset.description : getMetaTag("og:description");
        data["picture"] = (_this.dataset.picture) ? _this.dataset.picture : getMetaTag("og:image");
        if (_this.dataset.redirect_uri) {
            data["redirect_uri"] = _this.dataset.redirect_uri;
        }
        console.info(data);
        FB.ui(data, function (response) {
            console.info(response);
        });
    }
    
    init();
    
    return {
        loadFBCount : loadFBCount
    };
})();
</code></pre>
<h4>HTML - following is example html</h4>
<p>
  The way I'm trying to build is, following is minimal require fields, if html
  doesn't provide any value, default will go to meta tag to get the one. If you
  provide from html then will get from the html when click share.
</p>
<pre><code class="language-html">
&lt;a href="#" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;<br /><br /></code></pre>
<p>
  That says, if you define following at your html that would be show to the
  share window too.
</p>
<pre><code class="language-html">
&lt;a href="#" data-href="http://www.dakehe.info/blog/post/facebook-share-button" data-caption="An example caption" data-picture="http://g-ecx.images-amazon.com/images/G/01/img16/events/valentine/31780_events_vday2016_gw-double-promo_440x200._CB300695157_.jpg" data-description="description" data-name="name" data-redirect_uri="http://www.dakehe.info" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;
&lt;a href="#" data-href="http://www.dakehe.info/blog/post/facebook-share-button" data-caption="An example caption" data-description="description" data-name="name" data-redirect_uri="http://www.dakehe.info" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;&lt;a href="#" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;
</code></pre>
<h3>Conclusion</h3>
<p>
  If you're less knowledge of Javascript, you can try #1 to add facebook share,
  and if know javascript and the page you need facebook doesn't require much
  flexibility, you can use #2, but if your webpage need more than one facebook
  share, you can try #3.
</p>
<h3>More to come</h3>
<ul>
  <li>
    <a href="https://developers.facebook.com/" target="_blank"
      >facebook develper</a
    >&nbsp;- facebook developer page is giant area contains lots of products,
    I'll try some of them and will write blog here.
  </li>
  <li>
    <a
      href="https://developers.facebook.com/tools/debug/og/object/?q=http%3A%2F%2Fwww.dakehe.info%2Fblog%2Fpost%2Ffacebook-share-button"
      target="_blank"
      >facebook debug tools</a
    >&nbsp;&nbsp;
  </li>
</ul>


This blog show how to use facebook share in 3 ways. Contains code snippet in HTML, Javascript.

Category Facebook API

How to add Facebook Share Button to the Page